<template>
	<div class="mainPage">
		<div class="content-header">
			<div>{{ DBInfo.IP }}，数据库名:{{ DBInfo.DB_SID }}</div>
			<router-link style="font-size:16px" :to="{ name: 'NodeUsability' }">关闭</router-link>
		</div>
		<div style="padding: 0px 15px;height: 100%;">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="数据库详情" name="first">
					<div class="content-main">
						<div class="container-fluid">
							<div id="wrap">
								<div class="item">
									<el-card class="box-card">
										<div slot="header" class="clearfix">
											<span>线程信息</span>
										</div>
										<div>
											<vLibrarySpace />
										</div>
					
									</el-card>
								</div>
								<div class="item">
									<el-card class="box-card">
										<div slot="header" class="clearfix">
											<span>IO详情</span>
										</div>
										<div>
											<vDBIoDetail />
										</div>
									</el-card>
								</div>
								<div class="item">
									<el-card class="box-card">
										<div slot="header" class="clearfix">
											<span>实例命中率</span>
										</div>
										<div>
											<vStatusMonitoring />
										</div>
									</el-card>
								</div>
								<div class="item">
									<el-card class="box-card">
										<div slot="header" class="clearfix">
											<span>InnoDB存储引擎运行状态</span>
										</div>
										<div>
											<vInnoDBStatus />
										</div>
									</el-card>
								</div>
								<div class="item">
									<el-card class="box-card">
										<div slot="header" class="clearfix">
											<span>表空间大小</span>
										</div>
										<div>
											<vTableSpace />
										</div>
									</el-card>
								</div>
								<div class="item">
									<el-card class="box-card">
										<div slot="header" class="clearfix">
											<span>所有存储引擎</span>
										</div>
										<div>
											<vStorageEngine />
										</div>
									</el-card>
								</div>
								<div class="item">
									<el-card class="box-card">
										<div slot="header" class="clearfix">
											<span>冗余索引</span>
										</div>
										<div>
											<vRedundancyIndex />
										</div>
									</el-card>
								</div>
							</div>
							<!-- <el-row style="margin-top:15px" :gutter="15">
					  <el-col :md="12">
					    
					  </el-col>
					  <el-col :md="12" style="padding-left:0;padding-right:0">
					    <el-col>
					      
					    </el-col>
					    <el-col style="margin-top:15px">
					      
					    </el-col>
					    <el-col style="margin-top:15px">
					      
					    </el-col>
					  </el-col>
					</el-row>
					<el-row style="margin-top:15px" :gutter="15">
					  
					  <el-col>
					    
					  </el-col>
					  
					</el-row>
					<el-row style="margin-top:15px">
					  
					</el-row>
					<el-row style="margin-top:15px">
					  
					  <el-col>
					    
					  </el-col>
					</el-row> -->
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="主机信息" name="second" style="height:600px;padding: 10px;">
					<div style="background-color: white;">
						<vServerInfo />
					</div>
					
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import {
		GetItem
	} from "@/utils/dataStore";
	import vServerInfo from "../../components/ServerInfo.vue";
	import vLibrarySpace from "./component/librarySpace.vue";
	import vDBIoDetail from "./component/sqlConnect.vue";
	import vInnoDBStatus from "./component/sqlInnoDBStatus.vue";
	import vRedundancyIndex from "./component/sqlRedundancyIndex.vue";
	import vStorageEngine from "./component/sqlStorageEngine.vue";
	import vTableSpace from "./component/sqlTableSpace.vue";
	import vStatusMonitoring from "./component/StatusMonitoring.vue";
	export default {
		components: {
			vServerInfo,
			vLibrarySpace,
			vDBIoDetail,
			vInnoDBStatus,
			vRedundancyIndex,
			vStorageEngine,
			vTableSpace,
			vStatusMonitoring,
		},
		created() {
			GetItem(sessionStorage.getItem("PushId")).then((_) => {
				this.DBInfo = _[0].articleAddress;
				console.log(_,222)
			});
		},
		data() {
			return {
				DBInfo: "",
				activeName:'first'
			};
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.mainPage {
		background: #ededed;
		min-height: 94vh;
		width: 100%;
		overflow-y: scroll;

		.content-header {
			padding: 15px;
			font-size: 1.25rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.content-main {
			padding: 15px;

			.container-fluid {
				width: 100%;

				/deep/ .el-card__body {
					padding: 0 0 20px 0;
				}

				#wrap {
					width: 100%;
					column-count: 2;
					/* 列数 */
					column-gap: 10px;
					/* 列与列之间的距离 */
				}

				#wrap .item {
					break-inside: avoid;
					margin-bottom: 15px;
				}

				.callout-info {
					border-left-color: #117a8b;

					.head {
						font-size: 1rem;

						i {
							font-style: normal;
						}
					}

					.main {
						font-size: 0.9rem;
					}
				}

				.mainPage-info-box {
					padding: 5px;

					.left {
						border-radius: 0.25rem;
						-ms-flex-align: center;
						align-items: center;
						display: -ms-flexbox;
						display: flex;
						font-size: 1.875rem;
						-ms-flex-pack: center;
						justify-content: center;
						text-align: center;
						width: 70px;
						min-height: 70px;
					}
				}
			}
		}
	}

	.mainPage::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.mainPage::-webkit-scrollbar-thumb {
		background-color: rgba(4, 44, 119, 0.7);
		border-radius: 3px;
	}

	::v-deep .el-card.is-always-shadow {
		box-shadow: 0 0 1px #00000021, 0 1px 3px #0003;
	}
</style>